<template>
  <div>
    <!-- 通过手机号找回密码 -->
    <div class="input-group">
      <van-field
        @focus.native.capture="clearPhoneError"
        @blur.native.capture="checkPhone"
        :error-message="phoneMsg"
        v-model="phone"
        label="手机号"
        placeholder="请输入要找回密码的手机号"
      />
      <van-field
        type="password"
        v-model="spwd"
        label="新密码"
        @focus.native.capture="clearPwdError"
        :error-message="spwdMsg"
        @blur.native.capture="checkpwd"
        placeholder="请输入新密码"
        @input.native.capture="showEfficiency"
      />
      <div class="pwd" ref="kuang" :class="{ inp: spwd }">
        <div>{{ w_or_s1 }}</div>
        <div>{{ w_or_s2 }}</div>
        <div>{{ w_or_s3 }}</div>
      </div>
      <van-field
        :error-message="respwdMsg"
        @focus.native.capture="clearRepwdError"
        @blur.native.capture="checkRepwd"
        type="password"
        v-model="respwd"
        label="确认密码"
        placeholder="请再次输入新密码"
      />
    </div>
    <div class="btns">
      <div @click="update">确认修改</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      spwd: "",
      respwd: "",
      w_or_s1: "",
      w_or_s2: "",
      w_or_s3: "",
      phoneMsg: "",
      spwdMsg: "",
      respwdMsg: "",
      result: "", //存放验证手机号结果
    };
  },
  methods: {
    // 验证手机
    checkPhone() {
      if (!this.phone) {
        this.phoneMsg = "手机号不能为空!";
        return false;
      }
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.phoneMsg = "手机号格式不正确";
        return false;
      }
      // 格式正确 验证手机号是否存在 已注册
      const url = `api/users/checkPhone/${this.phone}`;
      this.axios.get(url).then((res) => {
        this.result = res
        if (this.result) {
          // 不存在手机号 ， 未注册
          if (this.result.data.code == 200) {
            this.phoneMsg = "该手机号未注册";
          } else {
            this.phoneMsg = "";
          }
        }
      });
    },
    // 验证密码
    checkpwd() {
      if (
        !/[\w\s\`\~\!\#\$\%\^\&\*\(\)\[\]{\}\\\|\;\'\'\:\"\"\,\.\/\<\>\?\+\-\*\@\=]/.test(
          this.spwd
        )
      ) {
        this.spwdMsg = "密码应为英文字符以及阿拉伯数字";
        return false;
      } else if (this.spwd.length < 6 || this.spwd.length > 12) {
        this.spwdMsg = "密码长度应为6-12位";
        return false;
      } else {
        this.spwdMsg = "";
        return true;
      }
    },
    // 验证确认密码
    checkRepwd() {
      // 非空
      if (!this.respwd) {
        this.respwdMsg = "密码不能为空";
        return false;
      }
      if (this.spwd == this.respwd) {
        this.respwdMsg = "";
        return true;
      } else {
        this.respwdMsg = "两次密码不相同";
        return false;
      }
    },
    // 修改
    update() {
      const { phoneMsg, checkpwd, checkRepwd } = this;
      if (phoneMsg=='' & checkpwd() & checkRepwd()) {
        const url = `api/users/resetpwd/phone/${this.phone}`;
        const params = { npwd: this.spwd };
        this.axios.put(url, params).then((res) => {
          if (res.data.code == 200) {
            // 弹窗
            this.$toast({
              message: "密码修改成功!",
              position: "bottom",
            });
            this.$router.push("/login");
          }
        });
      }
    },
    clearPwdError() {
      this.spwdMsg = "";
    },
    clearRepwdError() {
      this.respwdMsg = "";
    },
    clearPhoneError() {
      this.phoneMsg = "";
    },
    // 密码强中弱
    showEfficiency() {
      this.$refs.kuang.children.forEach = Array.prototype.forEach;
      let reg1 = /\d/;
      let reg2 = /[a-zA-Z]/;
      let reg3 =
        /[\s\`\~\!\#\$\%\^\&\*\(\)\_\[\]{\}\\\|\;\'\'\:\"\"\,\.\/\<\>\?\+\-\*\@\=]/;
      let count = 0;
      for (let i = 0; i < this.spwd.length; i++) {
        if (
          reg1.test(this.spwd) &&
          reg2.test(this.spwd) &&
          reg3.test(this.spwd)
        ) {
          count = 3;
        } else if (
          (reg1.test(this.spwd) &&
            !reg2.test(this.spwd) &&
            !reg3.test(this.spwd)) ||
          (!reg1.test(this.spwd) &&
            reg2.test(this.spwd) &&
            !reg3.test(this.spwd)) ||
          (!reg1.test(this.spwd) &&
            !reg2.test(this.spwd) &&
            reg3.test(this.spwd))
        ) {
          count = 1;
        } else if (
          (reg1.test(this.spwd) &&
            reg2.test(this.spwd) &&
            !reg3.test(this.spwd)) ||
          (reg1.test(this.spwd) &&
            !reg2.test(this.spwd) &&
            reg3.test(this.spwd)) ||
          (!reg1.test(this.spwd) &&
            reg2.test(this.spwd) &&
            reg3.test(this.spwd))
        ) {
          count = 2;
        }
      }
      if (count == 1) {
        this.w_or_s1 = "弱";
        this.w_or_s2 = "";
        this.w_or_s3 = "";
        this.$refs.kuang.children.forEach((item) => {
          item.style.backgroundColor = "red";
        });
      } else if (count == 2) {
        this.w_or_s2 = "中";
        this.w_or_s1 = "";
        this.w_or_s3 = "";
        this.$refs.kuang.children.forEach((item) => {
          item.style.backgroundColor = "#e7e414";
        });
      } else if (count == 3) {
        this.w_or_s3 = "强";
        this.w_or_s1 = "";
        this.w_or_s2 = "";
        this.$refs.kuang.children.forEach((item) => {
          item.style.backgroundColor = "green";
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input-group {
  margin-bottom: 10px;
  .van-field {
    border-bottom: 1px solid #ebedf0;
    padding: 10px;
  }
  .pwd {
    padding: 10px 0 0 15px;
    display: none;
    // 有数据的时候在显示
    &.inp {
      display: flex;
    }
    div {
      box-sizing: border-box;
      width: 100px;
      padding: 5px;
      margin-right: 5px;
      text-align: center;
      font-size: 0.9em;
      color: white;
      height: 20px;
    }
  }
}
.btns {
  margin-right: 2vw;
  div {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 0 10px 0;
    font-size: 0.8em;
    border-radius: 6px;
    background-color: #9a4145;
    color: #fff;
    padding: 10px;
    text-align: center;
  }
}
</style>